$(function () {
  // 调用一个方法获取文章列表数据
  getArticleList()
  // 定义一个弹出框索引变量
  var layerIndex = null
  // 绑定添加文章类别事件
  $('#article-add').on('click', function () {
    // 1. 弹出框
    // 1.1 获取模板引擎中定义的弹出框字符串
    // var articleAddStr = template('article-add-tpl', {})
    var articleAddStr = $('#article-add-tpl').html()
    layerIndex = layer.open({
      title: '添加文章分类',
      type: 1,
      // content: '<h2>可以填写任意的layer代码</h2>'
      content: articleAddStr,
      area: ['500px', '300px']
    });
    // 2. 获取弹出框中信息
    // 3. 将添信息发送给服务器
  })

  // 监听弹出框中的form表单的提交事件
  // 主要我们的这个表单是后来添加的 
  // 所以页面初次渲染完毕后没有这个元素的
  // 所以这里要使用事件委托
  $('body').on('submit', '.layui-form-addarticle', function (e) {
    e.preventDefault();
    // console.log(6666)
    // 1. 获取表单的值
    // 2. 发送请求
    $.ajax({
      url: '/my/article/addcates',
      method: 'post',
      data: $('.layui-form-addarticle').serialize(),
      success: function (data) {
        if (data.status !== 0) return layer.msg('添加文章类别失败')
        // 这里开始是成功的业务处理逻辑
        layer.msg('添加文章类别成功')
        // 关闭弹出框
        layer.close(layerIndex)
        // 重新获取文章分类数据
        getArticleList()
      }
    })
  })

  // 给删除按钮绑定点击事件 也要通过事件委托
  $('body').on('click', '#article-delete', function () {
    // console.log(99999)
    // 1. 获取要删除的id
    // console.log($(this))
    // var id = $(this).attr('data-id')
    // var id = $(this).data('id')
    // this是js对象 $(this)jQuery对象
    // var id = this.getAttribute('data-id')
    var id = this.dataset.id
    // console.log(id)
    // 2. 发送ajax请求删除
    $.ajax({
      url: '/my/article/deletecate/' + id,
      method: 'get',
      success: function (data) {
        if (data.status !== 0) return layer.msg('删除文章列表失败')
        // 这里开始是成功的业务处理逻辑
        getArticleList()
      }
    })
  })

  // 给编辑按钮添加点击事件
  $('body').on('click', '#article-edit', function () {
    // 1. 获取id
    var id = this.dataset.id
    // 2. 根据id获取文章的类别信息
    $.ajax({
      url: '/my/article/cates/' + id,
      method: 'get',
      success: function (data) {
        console.log(data)
        if (data.status !== 0) return layer.msg('获取文章列表失败')
        // 1.1 获取模板引擎中定义的弹出框字符串
        var editStr = template('article-edit-tpl', data.data) // { "Id": 1, "name": "最新", "alias": "ZuiXin", "is_delete": 0 }
        console.log(editStr)
        // 弹出弹出框
        layerIndex = layer.open({
          title: '编辑文章分类',
          type: 1,
          // content: '<h2>可以填写任意的layer代码</h2>'
          content: editStr,
          area: ['500px', '300px']
        });
      }
    })
    // 3. 将信息展示到弹出框中
    // 4. 表单提交
  })
  // 监听编辑表单的提交事件
  $('body').on('submit', '.layui-form-editarticle', function (e) {
    e.preventDefault();
    // console.log(6666)
    // 1. 获取表单的值
    // 2. 发送请求
    $.ajax({
      url: '/my/article/updatecate',
      method: 'post',
      data: $('.layui-form-editarticle').serialize(),
      success: function (data) {
        if (data.status !== 0) return layer.msg('修改文章类别失败')
        // 这里开始是成功的业务处理逻辑
        layer.msg('修改文章类别成功')
        // 关闭弹出框
        layer.close(layerIndex)
        // 重新获取文章分类数据
        getArticleList()
      }
    })
  })
})
var {layer} = layui
// 定义一个获取用户列表的方法
function getArticleList () {
  $.ajax({
    url: '/my/article/cates',
    success: function (data) {
      if (data.status !== 0) return layer.msg('获取文章列表失败')
      // 这里开始是成功的业务处理逻辑
      layer.msg('获取文章列表成功')
      // 1. 定义一个模板
      // 2. 通过模板引擎将数据生成html字符串
      // var listStr = template('article-list', {yy: [1, 2, 3]})
      var listStr = template('article-list-tpl', data) // template('article-list', {status: 0, message: '', data: []})
      // console.log(listStr)
      // 3. 将生成好的字符串追加到页面中去
      $('#article-list').html(listStr)
    }
  })
}
